﻿@{
    ViewBag.Title = "Stocks";
}

<h3 class="title">Stocks</h3>

@using (Ajax.BeginForm("SearchResults", "Stock",
    new AjaxOptions
    {
        InsertionMode = InsertionMode.Replace,
        HttpMethod = "POST",
        OnFailure = "searchFailed",
        LoadingElementId = "ajax-loading",
        UpdateTargetId = "searchResults"
    }
    ))
{
    @*
    ASP.NET MVC AJAX-autocomplete
    <input type="text" class="input-medium search-query" data-autocomplete-source="@Url.Action("Search", "Stock")" name="searchTerm" />    
    *@
    <input type="text" class="typeahead input-large search-query" />
    <button type="submit" class="btn">Search</button>
    <div id="searchResults"></div>
    
    <p>

        <input type="hidden" name="MIC"  id="hiddenMIC" value="" />
        <input type="hidden" name="Code" id="hiddenCode" value="" />
    </p>
@*
<input type="text" class="span3" style="margin: 0 auto;" 
    data-provide="typeahead" data-items="4" 
    data-source='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]' />
*@
    
}

@*<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>*@
@section scripts
{
    <script type="text/javascript">
        (function ($) {
            "use strict";

            function searchFailed() {
                $("#search-results").html("Not found");
            }

            $(document).ready(function () {
                //http://blattchat.com/2013/01/09/bootstrap-typeahead/
                $('.typeahead').typeahead({
                    minLength: 1,
                    source: function (query, process) {
                        jQuery.get('@Url.Action("Search", "Stock")', { term: query }, function (data) {
                            process(data.map(function (x) { return JSON.stringify(x); }));
                        });
                    },
                    highlighter: function (item) {
                        var pj = JSON.parse(item);
                        return "<span style='display:table-cell;width:30em;' data-mic='" + pj.MIC + "' data-code='" + pj.Code + "'>" + pj.Name + "</span><span style='display:table-cell;width:3em;text-align:right;'>" + pj.Code + "</span><span style='display:table-cell;'>&isin;" + pj.MIC + "</span>";
                    },
                    updater: function (item) {
                        var pj = JSON.parse(item);
                        $("#hiddenMIC").val(pj.MIC);
                        $("#hiddenCode").val(pj.Code);
                        return pj.Name;
                    },
                    matcher: function (item) {
                        var pj = JSON.parse(item),
                            matchPattern = new RegExp("^" + this.query, "i");
                        return matchPattern.test(pj.Name);
                    },

                });
@*
// ASP.NET MVC AJAX-autocomplete
$("input[data-autocomplete-source]").each(function () {
    var target = $(this);
    target.autocomplete({
        source: target.attr("data-autocomplete-source")
    });
    menu = target.autocomplete("widget");
    menu.addClass("dropdown-menu");
});
*@
            });
        }(jQuery));
    </script>
}
